<template>
  <!-- :model='form'绑定数据 :rulse="rulse"绑定校验规则-->
  <el-form :model="form" :rules="rules" ref="deptForm" label-width="120px">
    <!-- prop='name' 校验 是配合 reulse使用的-->
    <el-form-item label="部门名称" prop="name">
      <el-input
        v-model="form.name"
        style="width: 80%"
        placeholder="1-50个字符"
      />
    </el-form-item>
    <!-- prop='code' 校验 是配合 reulse使用的-->
    <el-form-item label="部门编码" prop="code">
      <el-input
        v-model="form.code"
        style="width: 80%"
        placeholder="1-50个字符"
      />
    </el-form-item>
    <!-- prop='manager' 校验 是配合 reulse使用的-->
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width: 80%" placeholder="请选择">
        <el-option
          :value="item.username"
          :label="item.username"
          v-for="item in list"
          :key="item.id"
        />
      </el-select>
    </el-form-item>
    <!-- prop='introduce' 校验 是配合 reulse使用的-->
    <el-form-item label="部门介绍" prop="introduce">
      <el-input
        v-model="form.introduce"
        style="width: 80%"
        placeholder="1-300个字符"
        type="textarea"
        :rows="3"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
  
<script>
// 导入部门负责人的接口,新增子部门,获取子部门详情,修改子部门数据
import { getEmployeesSimple, addEmployeesSimple, getDepartmentDetail, editDepartmentDetail } from '@/api/department(企业接口).js'
export default {
  // 0.父子传值
  props: {
    //(1)接收父组件传过来的id
    currentId: {
      type: String,
      required: true
    },
    //(2)接收负组件传过来的状态 true是编辑 false是新增
    isEdit: {
      type: Boolean,
      required: true
    },
    //(3)接收负组件传过来的值,来判断新增子部门的name code 是否重复
    originList: {
      type: Array,
      required: true
    }
  },
  // 1.数据渲染
  data () {
    // (1.1) 自定义规则校验(判断code是否重复) rule是校验规则 value是输入框穿过来的值 callback是放行
    const existCodeValid = (rule, value, callback) => {
      // (这个是新增状态)如果value与负组件传过来值相同那么就重复了 报出重复信息 否则通行
      let res = this.originList.map(item => item.code)
      // (这个是编辑状态的)如果是编辑状态那么就要先移除当前id的整个部门,然后在映射所有的code编码
      if (this.isEdit) {
        res = this.originList.filter(item => item.id != this.currentId).map(item => item.code)
      }
      if (res.includes(value)) {
        callback(new Error(`部门编号:${value}以重复`))
      } else {
        callback()
      }
    }
    // (1.2) 自定义规则校验(判断code是否重复) rule是校验规则 value是输入框穿过来的值 callback是放行
    const existNameValid = (rule, value, callback) => {
      // 这个修改子级部门 当我点击同级子部门的时候,他们的pid和当前点击的id是一样的 所以可以拿到当前点击的子部门的所有兄弟部门的名称
      let res = this.originList.filter(item => item.pid == this.currentId).map(item => item.name)
      // 如果是编辑部门
      if (this.isEdit) {
        // 找到当前点元素的对象并存储当前对象的pid
        const pid = this.originList.find(item => item.id == this.currentId).pid
        // 通过当前元素的pid找到所有的兄弟部门
        const b = this.originList.filter(item => item.pid == pid)
        // 过滤自己,并映射所有的同级兄弟的name
        res = b.filter(item => item.id != this.currentId).map(item => item.name)
      }
      if (res.includes(value)) {
        callback(new Error(`部门名称:${value}以重复`))
      } else {
        callback()
      }
    }
    return {
      // 1.1数据的收集
      form: {
        // 部门名字
        name: '',
        // 部门编码
        code: '',
        // 部门负责人
        manager: '',
        // 部门介绍
        introduce: ''
      },
      // 1.2部门负责人
      list: [],
      // 1.3校验规则
      rules: {
        // (1) 部门名称
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1~50个文字的部门名称', trigger: 'blur' },
          { validator: existNameValid, trigger: 'blur' }
        ],
        // (2) 部门编码
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1~50个文字的部门编码', trigger: 'blur' },
          { validator: existCodeValid, trigger: 'blur' }
        ],
        // (3) 部门负责人
        manager: [
          { required: true, message: '请选择部门负责人', trigger: ['change', 'blur'] }
        ],
        // (4) 部门介绍
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 300, message: '请输入1~300个文字的部门介绍', trigger: 'blur' }
        ]
      }
    }
  },
  // 2.事件
  methods: {
    // 2.1确定
    hSubmit () {
      // 兜底验证
      this.$refs.deptForm.validate(valid => {
        if (!valid) return
        this.isEdit ? this.doEdit() : this.doAdd()
      })
    },
    // 2.1.1 新增子部门
    async doAdd () {
      //(1) 发送请求 this.form里面没有pid这个数据 需要在父组件中传过来
      let res = await addEmployeesSimple({ ...this.form, pid: this.currentId })
      //(2)关闭弹层,渲染数据---->因为子组件没有弹层所有需要通知负组件关闭弹层并渲染数据
      this.$emit('success')
    },
    // 2.1.1 编辑子部门
    async doEdit () {
      // (1) 发送请求将修改后的数据填项到接口中
      let a = await editDepartmentDetail(this.form)
      console.log(a, '1111')
      // (2)关闭弹层,渲染数据---->因为子组件没有弹层所有需要通知负组件关闭弹层并渲染数据
      this.$emit('success')
    },
    // 2.2 取消
    hCancel () {
      // (1) 关闭弹层 ---> 弹层是在父组件中
      this.$emit('close')
    },
    // 2.3 获取部门负责人的请求函数
    async loadEmployeesSimple () {
      let res = await getEmployeesSimple()
      this.list = res.data
    },
    // 2.4 获取部门详情
    async loadDepartmentDetail () {
      // (1) 存储部门详情
      let res = await getDepartmentDetail(this.currentId)
      // (2) 将存储到的数据存到form中
      this.form = res.data
    },
    // 2.5 清空表单
    resetForm () {
      // 清空表单
      this.$refs.deptForm.resetFields()
    }
  },
  // 3.页面加载时就触发的钩子函数
  created () {
    // 3.1执行获取部门负责人的请求函数
    this.loadEmployeesSimple()
    // 3.2如果当前是编辑那么执行部门详情
    if (this.isEdit) {
      // (1)获取部门详情请求函数
      this.loadDepartmentDetail()
    }
  },
  // 4 侦听   使用侦听解决数据不更新
  watch: {
    // currentId 侦听的对象
    // currentId: function (oldValue, newValue) {
    //   console.log(oldValue)
    //   console.log(newValue)
    //   this.loadDepartmentDetail()
    // }
    // 深度侦听
    // deep: true,
    // currentId: {
    //   handler (oldValue, newValue) {
    //     console.log(oldValue)
    //     console.log(newValue)
    //     this.loadDepartmentDetail()
    //   },
    //   // immediate 是否立即侦听
    //   immediate: true
    // }
  }
}
</script>
  
<style>
</style>